//Vue方法
/*
new Vue({
    el:"#json",
    data:{
        message:"请求数据"
    },
    mounted(){
        axios
            .get('json/text1.json')
            .then(response => this.message = response.data.cont1)
    .catch(function (error) {
            console.log(error);
        })
    }
});
*/
//var p = document.createElement(p)
//p.classList.add("asd")
var page = 1;
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //数组对象类型
            var json = JSON.parse(xmlhttp.responseText);
            //console.log(json);
            for (let i = 0; i<json.cont.length; i++){
                //console.log(json.cont[i]);
                var li = document.createElement('li');
                var img = document.createElement('img');
                img.src = json.cont[i].pic;
                var info = document.createElement('div');
                info.classList.add("info");
                var h = document.createElement('h4');
                h.innerHTML = json.cont[i].h4;
                var title = document.createElement('p');
                title.classList.add("title");
                title.innerHTML = json.cont[i].p;
                var pro = document.createElement('div');
                pro.classList.add("progress");
                var pro_bar = document.createElement('div');
                pro_bar.classList.add("progress-bar");
                pro.appendChild(pro_bar);
                var desc = document.createElement('div');
                desc.classList.add("desc");
                var per = document.createElement('span');
                per.classList.add("percentage");
                per.innerHTML = json.cont[i].percentage;
                var letter = document.createElement('span');
                letter.classList.add("letter");
                letter.innerHTML = json.cont[i].letter;
                desc.appendChild(per);
                desc.appendChild(letter);
                var extra = document.createElement('div');
                extra.classList.add("extra");
                var yan = document.createElement('span');
                yan.classList.add("yan");
                yan.innerHTML = json.cont[i].yan;
                var cur = document.createElement('span');
                cur.classList.add("cur");
                cur.innerHTML = json.cont[i].cur;
                var price = document.createElement('span');
                price.classList.add("price");
                price.innerHTML = json.cont[i].price;
                extra.appendChild(yan);
                extra.appendChild(cur);
                extra.appendChild(price);
                info.appendChild(h);
                info.appendChild(title);
                info.appendChild(pro);
                info.appendChild(desc);
                info.appendChild(extra);
                li.appendChild(img);
                li.appendChild(info);
                document.querySelector("#list").appendChild(li);

            }


        }
    };
    xmlhttp.open("GET","json/text"+page+".json",true);
    xmlhttp.send();
}
loadXMLDoc();

document.querySelector("#btn").addEventListener('click', function () {
    if(page >= 4){
        page = 1;
    }else {
        page++
    }
    //先清空
    document.querySelector("#list").innerHTML = "";
    //再取数据放到 #list 里面
    loadXMLDoc()
});